<template>
  <div class="user-profile">
    <van-nav-bar class="page-nav-bar" title="个人中心">
      <van-icon @click="$router.go(-1)" class="left-icon" slot="left" name="arrow-left"></van-icon>
    </van-nav-bar>

    <input type="file" hidden ref="file" @change="onFileChange">

    <van-cell title="头像" is-link center @click="$refs.file.click()">
      <van-image round class="avatar" :src="users.photo"></van-image>
    </van-cell>
    <van-cell @click="isShowEditName = true" title="昵称" :value="users.name" is-link></van-cell>
    <van-cell title="性别" :value="users.gender ?'女' : '男' " is-link @click="isShowEditeGender=true"></van-cell>
    <van-cell title="生日" :value="users.birthday" is-link @click="isShowEditeBirthday=true"></van-cell>

    <!-- 编辑昵称弹层 -->
    <van-popup v-model="isShowEditName" position="bottom" :style="{height:'100%'}">
      <EditName v-if="isShowEditName" v-model="users.name" @left-close="isShowEditName = false"
        @close="isShowEditName = false"></EditName>
    </van-popup>
    <!-- 编辑性别弹层 -->
    <van-popup v-model="isShowEditeGender" position="bottom">
      <EditGender v-if="isShowEditeGender" v-model="users.gender" @close-popup='isShowEditeGender=false' />
    </van-popup>
    <!-- 编辑生日弹层 -->
    <van-popup v-model="isShowEditeBirthday" position="bottom">
      <EditBirthday v-if="isShowEditeBirthday" v-model="users.birthday" @close='isShowEditeBirthday=false' />
    </van-popup>
    <!-- 编辑头像弹层 -->
    <van-popup v-model="isShowEditePhoto" position="bottom" style="height:100%">
      <EditPhoto v-if="isShowEditePhoto" @close='isShowEditePhoto=false' :img=img
        @update-photo="users.photo = $event" />
    </van-popup>
  </div>
</template>

<script>
import { getUser } from '@/api/user.js'
import EditName from './comments/edit-name.vue'
import EditGender from './comments/edit-gender.vue'
import EditBirthday from './comments/edit-birthday.vue'
import EditPhoto from './comments/edit-Photo.vue'
export default {
  data () {
    return {
      users: {},
      isShowEditName: false,
      isShowEditeGender: false,
      isShowEditeBirthday: false,
      isShowEditePhoto: false,
      img: null // 预览的图片
    }
  },
  methods: {
    async loadingProfile () {
      try {
        const res = await getUser()
        this.users = res.data.data
        console.log(this.users)
      } catch (err) {
        console.dir(err)
        if (err.response && err.response.status === 409) {
          return this.$toast('用户名已存在')
        }
        this.$toast('获取数据失败')
      }
    },
    //
    onFileChange () {
      // 获取文件对象
      const file = this.$refs.file.files[0]

      // 基于文章对象获取 blob 数据
      this.img = window.URL.createObjectURL(file)

      // 展示预览图片弹出层
      this.isShowEditePhoto = true

      // file-input 如果选了同一个文件不会触发 change 事件
      // 解决办法就是每次使用完毕，把它的 value 清空
      this.$refs.file.value = ''
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    EditName,
    EditGender,
    EditBirthday,
    EditPhoto
  },
  created () {
    this.loadingProfile()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
  .page-nav-bar {
    .left-icon {
      color: #fff;
    }
  }
}
</style>
